<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>上传文件</title>
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    <script src="./lib/jquery.js"></script>
</head>

<body>
    <!-- 1. 文件选择框 -->
    <input type="file" id="file1" multiple />
    <!-- 2. 上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- bootstrap 中的进度条 -->
    <div class="progress" style="width: 500px; margin: 15px 10px;">
        <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
            0%
        </div>
    </div>
    <!-- 3. img 标签，来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800" />

    <script>
        // 上传地址：http://www.liulongbin.top:3006/api/upload/avatar
        // 步骤思路：
        // 1. 验证用户是否选中了文件
        $("#btnUpload").on('click', function () {
            var files = document.querySelector('#file1').files
            if (files.length <= 0) {
                return
                alert('请放入文件!!!')
            } else {
                console.log('放入了文件');
            }
            var fd = new FormData()
            fd.append('avatar', files[0])
            var xhr = new XMLHttpRequest()
            xhr.upload.onprogress = function (e) {
                if (e.lengthComputable) {
                    var num = Math.ceil(e.loaded / e.total) * 100
                    console.log(num);
                    $("#percent").css('width', num + '%')
                    $("#percent").html(num + '%')
                }
            }
            xhr.upload.onload = function () {
                $("#percent").removeClass().addClass('progress-bar progress-bar-success')
            }
            xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
            xhr.send(fd)
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText)
                    if (data.status == 200) {
                        document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
                    } else {
                        console.log('文件上传失败');
                    }
                }
            }
        })
        //    1. 给上传按钮绑定点击事件
        //    2. 事件处理函数里面 通过 文件域对象 获取files属性，如果 files 的length 大于0，说明选择了文件，反之提示用户
        // 2. 利用FormData对象来添加上传的文件
        //    1. 初始化 FormData 对象
        //    2. 利用 append 方法 追加文件对象
        // 3. 利用 xhr 发起文件上传的请求
        //    1. 初始化 xhr
        //    2. 通过 open 方法，第一个参数设置请求方式为 POST，第二个参数设置请求的URL地址
        //    3. 通过 send 方法，发起请求
        // 4. 监听上传是否成功
        //    1. 在 onreadystatechange 函数里面判断状态是否是DONE，响应码是否是200
        //        xhr.readyState === 4 && xhr.status === 200
        //    2. 上传成功之后，找到 img 元素对象 设置上传成功之后的地址（注意：服务器返回的是后面的path，我们需要拼接完整路径）
        //        document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
    </script>
</body>

</html>